<template>
  <div>
    <div class="top">
      <el-button size="mini" type="primary" plain @click="addClass()">新增商品分类</el-button>
      <el-button size="mini" type="primary" plain @click="editClass()">编辑商品分类</el-button>
      <el-button size="mini" type="primary" plain @click="deleteClass()">删除商品分类</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button size="mini" type="primary" plain @click="addGoods()">新增商品</el-button>
      <el-button size="mini" type="primary" plain @click="editGoods()">编辑商品</el-button>
      <el-button size="mini" type="primary" plain @click="deleteGoods()">删除商品</el-button>
      <div class="top-check">
        <el-form :inline="true" :model="checkForm" size="mini">
          <el-form-item label="商品编码">
            <el-input v-model="checkForm.code"></el-input>
          </el-form-item>
          <el-form-item label="品名">
            <el-input v-model="checkForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="CheckSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="CheckClear">清空查询条件</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="left tabbox">
      <treeTable
        v-if="treeTableApp.hackReset"
        :tableData="treeTableApp.classlist.treelist"
        table_height="690"
        :firstColumn="treeTableApp.firstColumn"
        @rowclick="Class_rowClick"
      >
        <el-table-column prop="code" label="编码" width="150"></el-table-column>
        <el-table-column prop="goodsnum" label="商品种类数" width="100"></el-table-column>
      </treeTable>
    </div>
    <div class="right tabbox">
      <!-- 用户列表 -->
      <el-table
        border
        :data="goodsTableApp.list.goodlist"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        tooltip-effect="light"
        highlight-current-row
        :stripe="true"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        @row-click="Good_rowClick"
        style="width: 100%"
        height="690"
      >
        <el-table-column  label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
        <el-table-column prop="code" label="编码" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="spec" label="规格型号" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="saleprice" label="销售基准价" width="150"></el-table-column>
        <el-table-column prop="unitname" label="计量单位" width="130"></el-table-column>
        <el-table-column show-overflow-tooltip prop="purchaseprice" label="建议销售价" width="120"></el-table-column>
        <el-table-column show-overflow-tooltip prop="brandfullname" label="品牌" width="150"></el-table-column>
        <el-table-column prop="taxrate" label="税率(%)" width="80" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="clear"></div>
    <addGoodClassdialog
      :form="treeTableApp.tempRow"
      v-if="dialog.add_class"
      @refresh="RefreshClasses"
      @dialog-close="dialog.add_class=false"
    ></addGoodClassdialog>
    <editGoodClassdialog
      :form="treeTableApp.tempRow"
      v-if="dialog.edit_class"
      @refresh="RefreshClasses"
      @dialog-close="dialog.edit_class=false"
    ></editGoodClassdialog>
    <deleteGoodClassdialog
      :form="treeTableApp.tempRow"
      v-if="dialog.delete_class"
      @refresh="RefreshClasses"
      @dialog-close="dialog.delete_class=false"
    ></deleteGoodClassdialog>
    <addGoodDialog
      :form="goodsTableApp.tempRow"
      v-if="dialog.add_good"
      @refresh="RefreshGoods(treeTableApp.SelectRow.id)"
      @dialog-close="dialog.add_good=false"
    ></addGoodDialog>
    <editGoodDialog
      :form="goodsTableApp.tempRow"
      v-if="dialog.edit_good"
      @refresh="RefreshGoods(treeTableApp.SelectRow.id)"
      @dialog-close="dialog.edit_good=false"
    ></editGoodDialog>
    <deleteGoodDialog
      :form="goodsTableApp.tempRow"
      v-if="dialog.delete_good"
      @refresh="RefreshGoods(treeTableApp.SelectRow.id)"
      @dialog-close="dialog.delete_good=false"
    ></deleteGoodDialog>
  </div>
</template>

<script>
import treeTable from "../multiplexing/treetable";
import addGoodClassdialog from "./goods_dialog/goodclass/add";
import deleteGoodClassdialog from "./goods_dialog/goodclass/delete";
import editGoodClassdialog from "./goods_dialog/goodclass/edit";
import deleteGoodDialog from "./goods_dialog/good/delete";
import addGoodDialog from "./goods_dialog/good/add";
import editGoodDialog from "./goods_dialog/good/edit";
export default {
  components: {
    treeTable,
    addGoodClassdialog,
    deleteGoodClassdialog,
    editGoodClassdialog,
    deleteGoodDialog,
    addGoodDialog,
    editGoodDialog
  },
  data() {
    return {
      checkForm: {
        code: "",
        name: ""
      },
      dialog: {
        add_class: false,
        edit_class: false,
        delete_class: false,
        add_good: false,
        edit_good: false,
        delete_good: false
      },
      treeTableApp: {
        hackReset: false,
        firstColumn: {
          name: "商品分类",
          prop: "classname",
          width: "250"
        },
        classlist: {
          treelist: []
        },
        SelectRow: {},
        tempRow: {}
      },
      goodsTableApp: {
        list: {
          goodlist: []
        },
        SelectRow: {},
        tempRow: {} //隔离对象，用于传递
      }
    };
  },
  methods: {
    newMethod() {},
    CheckSubmit() {
      this.$http.post("good/search",this.checkForm).then(response =>{
        this.goodsTableApp.list.goodlist = response.data
      })
    },
    CheckClear() {
      this.checkForm = {
        code: "",
        name: ""
      };
    },
    RefreshGoods(id) {
      this.$http.post("/good/someGoodList", { classid: id }).then(response => {
        this.goodsTableApp.list.goodlist = response.data;
      });
    },
    RefreshClasses() {
      this.treeTableApp.hackReset = false;
      this.$http.get("/goodClass/list").then(response => {
      this.treeTableApp.classlist.treelist = response.data;
      this.$nextTick(() => {
        this.treeTableApp.hackReset = true;
      });
    });
    this.RefreshGoods(1);
    },
    Class_rowClick(Obj) {
      this.goodsTableApp.SelectRow = {};
      this.RefreshGoods(Obj.id);
      this.treeTableApp.SelectRow = JSON.parse(JSON.stringify(Obj));
    },
    Good_rowClick(Good) {
      window.console.log(Good);
      this.goodsTableApp.SelectRow = JSON.parse(JSON.stringify(Good));
    },
    Check_Class() {
      let checkname = this.treeTableApp.SelectRow.name;
      if (checkname == null || checkname == "") {
        this.$message.error("请选择一个商品种类！");
        return;
      }
      return true;
    },
    Check_Good() {
      let checkname = this.goodsTableApp.SelectRow.id;
      if (checkname == null || checkname == "") {
        this.$message.error("请选择一个商品种类！");
        return;
      }
      return true;
    },
    RefreshTempRow() {
      this.goodsTableApp.tempRow = JSON.parse(
        JSON.stringify(this.goodsTableApp.SelectRow)
      );
      this.treeTableApp.tempRow = JSON.parse(
        JSON.stringify(this.treeTableApp.SelectRow)
      );
    },
    addClass() {
      this.RefreshTempRow();
      this.dialog.add_class = true;
    },
    editClass() {
      this.RefreshTempRow();
      if (this.Check_Class()) this.dialog.edit_class = true;
    },
    deleteClass() {
      this.RefreshTempRow();
      if (this.Check_Class()) this.dialog.delete_class = true;
    },
    addGoods() {
      this.RefreshTempRow();
      this.dialog.add_good = true;
    },
    editGoods() {
      this.RefreshTempRow();
      if (this.Check_Good()) this.dialog.edit_good = true;
    },
    deleteGoods() {
      this.RefreshTempRow();
      if (this.Check_Good()) this.dialog.delete_good = true;
    }
  },
  created() {
    this.$http.get("goodClass/list").then(response => {
      this.treeTableApp.classlist.treelist = response.data;
      this.$nextTick(() => {
        this.treeTableApp.hackReset = true;
      });
    });
    this.RefreshGoods(1);
  }
};
</script>

<style scoped>
.left {
  height: 695px;
  width: 500px;
  /* background-color: red; */
  float: left;
  clear: right;
  margin-right: 15px;
}
.right {
  height: 695px;
  width: 1280px;
  float: left;
}
</style>